<template>
	<view class="saleDatails">
		<view class="state">
			<text>售后状态：{{info.refund_status_name}}</text>
		</view>
		<view class="line">
			<text>{{info.sn}}</text>
			<text>{{info.create_time}}</text>
		</view>
		<view class="goods" @click="jump('product_view', info.product_id)">
			<image :src="info.product_picture" mode="aspectFill"></image>
			<view class="right">
				<text>{{info.product_name}}</text>
				<view class="num">
					<text>{{info.sku_name}}</text>
					<text>x{{info.product_num}}</text>
				</view>
				<text>{{'￥'+info.price}}</text>
			</view>
		</view>
		<view class="line">
			<text>售后类型</text>
			<text class="txt">{{info.refund_type_name}}</text>
		</view>
		<view class="line">
			<text>售后数量</text>
			<text class="txt">{{info.product_num}}</text>
		</view>
		<view class="line" v-if="info.refund_require_money > 0">
			<text>售后金额</text>
			<text class="txt1">{{'￥'+info.refund_require_money}}</text>
		</view>
		<view class="line">
			<text>售后原因</text>
			<text class="txt">{{info.refund_reason}}</text>
		</view>
		<view class="line">
			<text>售后说明</text>
			<text class="txt">{{info.refund_remark}}</text>
		</view>
		<view class="line2" v-if="info.refund_covers && info.refund_covers.length > 0">
			<view class="title">售后图片</view>
			<view class="item">
				<image  v-for="(item,index) in info.refund_covers" :key="index" :src="item.imgUrl" mode="aspectFill"></image>
			</view>
		</view>
		<view class="line" v-if="info.refund_address">
			<text>退货地址</text>
			<text class="txt">{{info.refund_address}}</text>
		</view>
		<view class="line" v-if="info.product_state != ''">
			<text>售后商品</text>
			<text class="txt">{{info.product_state}}</text>
		</view>
		<view class="line" v-if="info.refund_shipping_company != ''">
			<text>寄回物流</text>
			<text class="txt">{{info.refund_shipping_company}}：{{info.refund_shipping_code}}</text>
		</view>
		<view class="line" v-if="info.return_express_name != ''">
			<text>换货物流</text>
			<text class="txt">{{info.return_express_name}}：{{info.return_express_no}}</text>
		</view>
		<view class="line" v-if="info.payment_type > 0">
			<text>退款方式</text>
			<text class="txt">{{info.payment_type_name}}</text>
		</view>
		<view class="line" v-if="info.refund_balance_money > 0">
			<text>退款金额</text>
			<text class="txt">{{info.refund_balance_money}}</text>
		</view>
		<view class="content">
			<view class="title">
				售后日志
			</view>
			<view class="info" v-for="(item,index) in info.log_list" :key="index">
				<view>
					<text>{{item.action_username}}</text>
					<text class="time">{{item.action_time}}</text>
				</view>
				<view class="text">{{item.action}}</view>
			</view>
		</view>
		<view class="bot" v-if="info.button_list && info.button_list.length > 0" >
			<view :class="info.button_list.length == 1 ? 'txt1' : 'txt2'" v-for="(button,index2) in info.button_list" :key="index2" @click="operate(button.type)">
				<text >{{button.name}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	import serve from '../../static/request.js';
	import storage from '../../static/appkey.js';
	import common from '../../static/jump.js';
	export default {
		data() {
			return {
				list: [{}, {}],
				id : 0,
				info: {},
				
			}
		},
		methods: {
			getInfo() {
				var self = this;
				serve.request({
					url: '/member/order-customer/view',
					data: {
						id: self.id
					}
				}).then(res => {
					if(res.code != 200) {
						uni.showToast({
							title:res.message,
							icon: 'none',
							success() {
								setTimeout(function () {
									self.jump('refund_list')
								}, 2000) 
							}
						});
					}
					self.info = res.data;
				});
			},
			operate(operateType) {
				var self = this;
				if(operateType == 'refund_close') {
					uni.showModal({
					    title: '提示',
					    content: '您确定取消该售后申请吗',
					    success: function (res) {
					        if (res.confirm) {
					            serve.request({
									url: '/member/order-customer/refund-close',
									data:{
										id:self.id,
									}
								}).then(res => {
									uni.showToast({
										title:res.message,
										icon: 'none',
									});
									if(res.code == 200) {
										self.getInfo();
									} 
								});
					        } 
					    }
					});
					return ;
				} else if(operateType == 'refund_product') {
					uni.navigateTo({
						url:'/pages/my/refund?id=' + self.id
					});
					return ;
				} else if(operateType == 'refund_delivery') {
					uni.showModal({
					    title: '提示',
					    content: '您确定换货商品已收货吗',
					    success: function (res) {
					        if (res.confirm) {
					            serve.request({
									url: '/member/order-customer/refund-delivery',
									data:{
										id:self.id,
									}
								}).then(res => {
									uni.showToast({
										title:res.message,
										icon: 'none',
									});
									if(res.code == 200) {
										self.getInfo()
									} 
								});
					        } 
					    }
					});
					return ;
				} 
			}
		},
		onLoad(options) {
			this.id=options.id || 0;
			if(this.id == 0) {
				uni.showToast({
					title: "错误的访问方式",
					icon: 'none',
					success() {
						setTimeout(function () {
							this.jump('refund_list')
						}, 2000) 
					}
				});
			}
			this.getInfo();
		},
		onPullDownRefresh() {
			console.log('refresh');
			this.getInfo();
		}
	}
</script>

<style scoped lang="scss">
	.saleDatails {
		.state {
			width: 100%;
			text-align: center;
			line-height: 110upx;
			height: 110upx;
			background: rgba(255, 200, 10, 0.05);
			font-size: 32upx;
			color: rgba(255, 200, 10, 1);
		}

		.goods {
			display: flex;
			align-items: center;
			box-sizing: border-box;
			padding: 30upx;
			width: 100%;
			border-bottom: 1upx rgba(235, 236, 240, 1) solid;

			image {
				width: 170upx;
				height: 170upx;
			}

			.right {
				width: 505upx;
				display: flex;
				margin-left: 17upx;
				flex-direction: column;
				justify-content: center;
				font-size: 24upx;
				color: rgba(255, 198, 0, 1);

				text:first-child {
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					font-size: 32upx;
					font-weight: bold;
					color: rgba(60, 72, 104, 1);
				}

				.num {
					display: flex;
					justify-content: space-between;
					padding: 26upx 0upx;
					color: rgba(60, 72, 104, 0.5);

					text:first-child {
						font-size: 24upx;
						font-weight: 400;
						color: rgba(60, 72, 104, 0.5);
					}
				}
			}
		}

		.line {
			box-sizing: border-box;
			justify-content: space-between;
			border-bottom: 1upx rgba(235, 236, 240, 1) solid;
			display: flex;
			width: 100%;
			padding: 33upx 30upx;
			font-size: 28upx;

			.txt1 {
				color: rgba(255, 198, 0, 1);
				font-size: 32upx;
				font-weight: bold;
				max-width: 495upx;
			}

			.txt {
				font-size: 32upx;
				font-weight: bold;
				color: rgba(60, 72, 104, 1);
				max-width: 495upx;
			}
		}

		.line:last-child {
			border-bottom: none;
		}
		
		.line2{
			display: flex;
			box-sizing: border-box;
			font-size:32upx;
			flex-direction: column;
			padding:0upx 30upx 36upx;
			width: 100%;    
			border-bottom: 1rpx #ebecf0 solid;
			
			.title {
				position: relative;
				width: 130upx;
				font-size: 24upx;
				text-align: center;
				height: 24upx;
				font-weight: bold;
				line-height: 24upx;
				margin-top: 20upx;
			}
			
			.title::before {
				content: '';
				position: absolute;
				left: 0;
				top: 0;
				width: 6upx;
				height: 24upx;
				background: rgba(255, 198, 0, 1);
				border-radius: 2upx;
			}
			.item{
				padding-top: 30upx;
				display: flex;
				flex-wrap: wrap;
				image {
					width:128upx;
					height:128upx;
					margin-right: 20upx;
				}				
			}
		}

		.content {
			width: 100%;
			box-sizing: box-sizing;
			padding: 60upx 30upx 100upx;
			background: #FBFBFD;

			.title {
				position: relative;
				width: 130upx;
				font-size: 24upx;
				text-align: center;
				height: 24upx;
				font-weight: bold;
				line-height: 24upx;
			}

			.title::before {
				content: '';
				position: absolute;
				left: 0;
				top: 0;
				width: 6upx;
				height: 24upx;
				background: rgba(255, 198, 0, 1);
				border-radius: 2upx;
			}

			.info {
				padding: 20upx 0upx;
				box-sizing: border-box;
				font-size: 28upx;
				color: rgba(60, 72, 104, 0.5);
				border-bottom: 1upx rgba(235, 236, 240, 1) solid;

				.time {
					margin-left: 60upx;
				}

				.text {
					font-size: 28upx;
					color: rgba(60, 72, 104, 1);
					margin-top: 30upx;
				}
			}
		}
		
		.bot {
			position: fixed;
			width: 100%;
			height: 100upx;
			bottom: 0upx;
			border-top: 1upx #EBECF0 solid;
		
			.txt1 {
				box-shadow: 0px 1upx 0px 0px rgba(235, 236, 240, 1);
				width: 100%;
				height: 100%;
				background: #FFC80A;
				color: #FFFFFF;
				font-size: 28upx;
				text-align: center;
				line-height: 100upx;
			}
		
			.txt2 {
				box-shadow: 0px 1upx 0px 0px rgba(235, 236, 240, 1);
				display: flex;
				width: 100%;
				height: 100%;
		
				text {
					height: 100upx;
					line-height: 100upx;
					text-align: center;
					width: 50%;
					background: #FFFFFF;
					font-size: 28upx;
					color: rgba(60, 72, 104, 1);
				}
		
				text:last-child {
					background: rgba(255, 200, 10, 1);
					color: #FFFFFF;
				}
			}
		}
	}
</style>
